<template>
  <div>
    <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
      <template v-for="item in subMenus" :key="item.key">
        <a-sub-menu v-if="item.subMenus && item.subMenus.length" :title="item.name">
          <template #icon>
            <PieChartOutlined />
          </template>
          <template v-for="i in item.subMenus" :key="i.key">
            <a-menu-item>
              <template #icon>
                <PieChartOutlined />
              </template>
              {{ i.name }}
            </a-menu-item>
          </template>
        </a-sub-menu>
        <a-menu-item v-else>
          <template #icon>
            <PieChartOutlined />
          </template>
          {{ item.name }}
        </a-menu-item>
      </template>
    </a-menu>
  </div>
</template>

<script>
import { reactive, ref } from 'vue';
import { PieChartOutlined } from '@ant-design/icons-vue';

export default {
  name: 'Menus',
  setup() {
    let subMenus = reactive([
      {
        name: '权限管理',
        key: '1',
        path: '/main',
        subMenus: [
          { name: '角色管理', key: '/authMgt/roleMgt', path: '/authMgt/roleMgt' },
          { name: '权限管理', key: '/authMgt/apiMgt', path: '/authMgt/apiMgt' },
          { name: '菜单管理', key: '/authMgt/menuMgt', path: '/authMgt/menuMgt' }
        ]
      },
      {
        name: '用户管理',
        key: '2',
        path: '/users',
        subMenus: []
      }
    ]);
    return {
      selectedKeys: ref(['1']),
      collapsed: ref(false),
      subMenus
    };
  },
  components: {
    PieChartOutlined
  }
};
</script>

<style scoped lang="scss"></style>
